<template>
  <div style="padding: 5px">
    <div>
      <el-button type="primary" style="margin: 5px" @click="getAllDrug">显示全部药品</el-button>
      <el-button type="primary" @click="FormVisible3=true">添加药品</el-button>
    </div>
    <div>
      <el-input v-model="input" style="width: 20%" placeholder="请输入药品名称"/>
      <el-button type="primary" style="margin: 5px" @click="selectOneDrug">搜索</el-button>
    </div>
    <div>
      <el-table :data="drugDatalist.slice((currentPage - 1) * pageSize, currentPage * pageSize) " border
                style="width: 100%">
        <el-table-column prop="drugId" label="药品ID" width="300"/>
        <el-table-column prop="drugName" label="药品名称" width="300"/>
        <el-table-column prop="drugClass" label="药品类别"/>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="deleteDrug(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-dialog title="添加药品" v-model=FormVisible3 width="60%">
        <el-form ref="form3" :model="form3" label-width="80px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="药品名">
                <el-input v-model="form3.drugName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="药品类别">
                <el-input v-model="form3.drugClass"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-button type="primary" icon="el-icon-search" @click="addDrug">确定</el-button>
      </el-dialog>
      <div class="demo-pagination-block">
        <div class="demonstration"></div>
        <el-pagination
            layout="total,prev,pager,next,jumper"
            :total="drugDatalist.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Drug",
  data() {
    return {
      drugDatalist: [],
      input: "",
      FormVisible3: false,
      form3: {},
      currentPage: 1,
      pageSize: 5,
    }
  },
  created() {
    this.getAllDrug();
  },
  methods: {
    getAllDrug() {
      axios.get("/api/drug").then((res) => {
        this.drugDatalist = res.data.data;
        this.message = res.data.msg;
      });
    },
    selectOneDrug() {
      axios.get("api/drug/" + this.input).then((res) => {
        if(res.data.code==20041){
          this.drugDatalist = res.data.data;
          this.message = res.data.msg;
          this.data.splice(1, 0);
        }
        else {
          this.drugDatalist = [];
          this.input = "";
        }


      });
    },
    addDrug() {
      axios.post("/api/drug", this.form3).then((res) => {
        //如果操作成功，关闭弹层，显示数据
        if (res.data.code == 20011) {
          this.FormVisible3 = false;
          this.form3 = {};
          this.$message.success("添加成功");
        } else if (res.data.code == 20010) {
          this.$message.error("添加失败");
        } else {
          this.$message.error(res.data.msg);
        }
      }).finally(() => {
        this.getAllDrug();
      });
    },
    handleSizeChange: function (size) {
      this.pageSize = size;
    },

    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    deleteDrug(row) {
      //1.弹出提示框
      this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
        type:'info'
      }).then(()=>{
        //2.做删除业务
        axios.delete("api/drug/"+row.drugId).then((res)=>{
          this.$message.success("删除成功");
        }).finally(()=>{
          this.getAllDrug();
        });
      }).catch(()=>{
        //3.取消删除
        this.$message.info("取消删除操作");
      });
    }

  }

}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>